/**
 * 单元格对齐设置
 */
function scCellAlignSetting(opt){
    var com = scCommon.instance();
    var crEle = com.crEle;

    var list = [
        {label: "靠上居左对齐", icon: resource.alignTopLeft, value: "topLeft"},
        {label: "靠上居中对齐", icon: resource.alignTopCenter, value: "topCenter"},
        {label: "靠上居右对齐", icon: resource.alignTopRight, value: "topRight"},
        {label: "水平居左对齐", icon: resource.alignMiddleLeft, value: "middleLeft"},
        {label: "水平居中对齐", icon: resource.alignMiddleCenter, value: "middleCenter"},
        {label: "水平居右对齐", icon: resource.alignMiddleRight, value: "middleRight"},
        {label: "靠下居左对齐", icon: resource.alignBottomLeft, value: "bottomLeft"},
        {label: "靠下居中对齐", icon: resource.alignBottomCenter, value: "bottomCenter"},
        {label: "靠下居右对齐", icon: resource.alignBottomRight, value: "bottomRight"},
    ];

    var box = null;
    var isActive = false;
    var listener = null;
    var lastLi = null;

    this.createView = function(option){
        option = option ? option : {};
        listener = option.listener;

        box = crEle("div", "sc-cellalign-setting");

        let ul = crEle("ul", "sc-cellalign-ul");
        
        let item = null;
        for(let i in list){
            item = list[i];

            let li = crEle("li", "sc-cellalign-li");
            let img = crEle("img", "sc-cellalign-img");

            img.src = item.icon;
            img.title = item.label;
            
            item.element = li;

            li.appendChild(img);
            ul.appendChild(li);

            li.addEventListener("click", (e)=>{
                let item = list.find(it=>it.element === e.currentTarget);
                listener["click"][0]("setStyle", {
                    align: item.value
                });
                switchEffect(e.currentTarget, lastLi);
                e.stopPropagation();
            });
        }

        let arrow = crEle("div", "sc-cellalign-arrow");
        let img = crEle("img");

        img.src = scToolbarResource.arrowDown;
        arrow.appendChild(img);

        arrow.addEventListener("click", (e)=>{
            setBoxActive();
        });

        box.appendChild(arrow);
        box.appendChild(ul);

        return box;
    }

    /**
     * 切换点击效果
     * @param {*} li 
     * @param {*} lastli 
     */
    var switchEffect = function(li, lastli){
        if(lastli){
            lastli.classList.remove("active");
        }
        li.classList.add("active");

        lastLi = li;
    }

    /**
     * 设置盒子是否激活
     */
    var setBoxActive = function(flg){
        if(flg === false){
           box.classList.remove("active");
           isActive = false;
           return;
        }
        
        if(isActive){
            box.classList.remove("active");
        }else{
            box.classList.add("active");
        }
        isActive = !isActive;
    }

    /**
     * 通知
     * @param {*} eventType 
     * @param {*} param 
     */
    this.notify = function (eventType, param) {
        if(eventType == "mousedown"){
            setBoxActive(false);
        }
    }
}